<template>
    <div id="lee">
        <el-container>
            <el-header style="--el-header-padding:none;">
                <app-header :is-collapse="!isCollapse" @collopseOperation="collopseOperation" @loadMenus="loadMenus"/>
            </el-header>
            <el-container>
                <!--@mouseenter="isCollapse=true;"
                           @mouseleave="isCollapse=false"-->
                <el-aside :width="!this.outerIsCollapse?'64px':'200px'">
                    <app-left :is-collapse="!isCollapse" :leftMenuDatas="leftMenuDatas"/>
                </el-aside>
                <el-main>
                    <div class="toolbar">
                        <el-tag @click="changeTab(-1)" class="toolItem">
                            <font-awesome-icon icon="angle-double-left"/>
                        </el-tag>
                        <el-tag :class="{active:$route.path===item.path}"
                                :closable="item.path!='/home'"
                                :disable-transitions="false"
                                :key="index"
                                :title="item.name"
                                @click="redirect(item)"
                                @close="closeTab(item)"
                                class="toolItem"
                                effect="plain"
                                type="info"
                                v-for="(item,index) in getNavData"
                        >
                            <span class="dot" v-if="$route.path===item.path"></span>
                            {{item.name}}
                        </el-tag>

                        <div style="position: absolute;right: 0">
                            <el-tag @click="changeTab(1)" class="toolItem">
                                <font-awesome-icon icon="angle-double-right"/>
                            </el-tag>
                            <el-dropdown hide-on-click="false" placement="bottom" trigger="hover">
                                <span class="el-tag el-tag--light toolItem">菜单列表</span>
                                <template #dropdown>
                                    <el-dropdown-menu>
                                        <el-dropdown-item :class="{active:$route.path===item.path}"
                                                          :divided="true"
                                                          :key="index"
                                                          :title="item.name"
                                                          @click="redirect(item)"
                                                          @close="closeTab(item)"
                                                          class="clearfix"
                                                          v-for="(item,index) in getNavData"
                                        >
                                            <span class="dot" v-if="$route.path===item.path"></span>
                                            {{item.name}}
                                        </el-dropdown-item>
                                    </el-dropdown-menu>
                                </template>
                            </el-dropdown>
                        </div>
                    </div>
                    <router-view v-slot="{Component}">
                        <transition name="solid">
                            <keep-alive :include="getViewCache">
                                <component :is="Component"/>
                            </keep-alive>
                        </transition>
                    </router-view>
                </el-main>
            </el-container>
        </el-container>
    </div>
    <el-backtop :bottom="100">
        <div  style="
        height: 100%;
        width: 100%;
        background-color: #f2f5f6;
        box-shadow: 0 0 6px rgba(0, 0, 0, 0.12);
        text-align: center;
        line-height: 40px;
        color: #1989fa;
      "
        >
            UP
        </div>
    </el-backtop>
</template>

<script>
    import {mapGetters} from "vuex";
    import AppHeader from "./AppHeader";
    import AppLeft from "./AppLeft";
    import axios from "axios";
    import {error} from "../utils/message";
    import router from "../router";

    export default {
        name: 'Dashboard',
        components: {AppLeft, AppHeader},
        data() {
            return {
                isCollapse: false,
                outerIsCollapse: false,
                leftMenuDatas: []
            }
        },
        created() {
            let path = "/home";
            let name = "首页";
            this.$store.dispatch("commitNavBar", {name, path, componentName: "Index"});
            this.leftMenuDatas = this.getPermissionMenus;
            this.initMenus();
        },
        methods: {
            initMenus(){
                let that=this;
                router.getRoutes().forEach(item=>{
                    if(item.path=="/"||item.path=="/login"){
                        return;
                    }
                    let data = {
                        path: item.path,
                        name: item.name,
                        menuIcon: item.meta.menuIcon,
                        children: [],
                        meta: {
                            title: item.meta.title,
                            keepAlive: item.meta.keepAlive || false
                        }
                    };
                    that.leftMenuDatas.push(data);
                })  ;
            },
            loadMenus(sysemId) {
                let that = this;
                let query = [];
                query.push({
                    "propertyName": "isDel",
                    "value": 0,
                });
                query.push({
                    "propertyName": "statusCode",
                    "value": 1,
                });
                query.push({
                    "propertyName": "informationsSingleId",
                    "value": sysemId,
                });
                axios.post("system-config/system/menusinfoEntity/getAllByCondition", query).then((res) => {
                    let redata = res.data.data;
                    that.leftMenuDatas = [];
                    redata.forEach(item => {
                        let path = item.menuPath.startsWith("/") ? item.menuPath : "/" + item.menuPath;
                        let data = {
                            path: path,
                            name: item.menuCode,
                            menuIcon: item.menuIcon,
                            children: [],
                            meta: {
                                title: item.menuName,
                                keepAlive: item.keepAlive || false
                            }
                        };
                        if (item.children && item.children.length > 0) {
                            item.children.forEach(sitem => {
                                let spath = sitem.menuPath.startsWith("/") ? sitem.menuPath : "/" + sitem.menuPath;
                                let sdata = {
                                    path: spath,
                                    name: sitem.menuCode,
                                    menuIcon: sitem.menuIcon,
                                    children: [],
                                    meta: {
                                        title: sitem.menuName,
                                        keepAlive: sitem.keepAlive || false
                                    }
                                };
                                data.children.push(sdata);
                            });
                        }
                        that.leftMenuDatas.push(data);
                        //初始化时已经拿到所有权限菜单到路由
                    });
                }).catch(err => {
                    error(err);
                });
            },
            collopseOperation: function () {
                this.isCollapse = !this.isCollapse;
            },
            closeTab: function (data) {
                this.$store.dispatch("clearNavBar", data);
                this.$store.dispatch("clearCache", data.componentName);
            },
            redirect: function (item) {
                this.$router.push({path: item.path});
            },
            changeTab: function (data) {
                this.$store.dispatch("changeTab", data);
            }
        },
        computed: {
            ...mapGetters(["getNavData", "getViewCache", "getPermissionMenus"])
        },
        watch: {
            isCollapse: function (val) {
                let that = this;
                setTimeout(function () {
                    that.outerIsCollapse = val;
                }, 200);
            }
        }
    }
</script>

<style>
    .el-header {
        box-shadow: 0px 10px 5px #f7f7f7;
    }

    #nprogress .bar {
        background: red !important;
    }

    * {
        margin: 0px;
        padding: 0px;
    }

    html {
        height: 100%;
        overflow: hidden;
    }

    body {
        height: 100%;

    }

    .el-header {
        height: 90px;
        -el-header-padding: 0px;
        --el-header-height: none;
    }

    .toolbar {
        border-bottom: #3a8ee6 solid 2px;
        float: left;
        width: 100%;
    }

    #lee {
        font-family: Avenir, Helvetica, Arial, sans-serif;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        text-align: center;
        color: #2c3e50;
        height: 100%;
    }

    .el-main {
        --el-main-padding: 0px
    }

    #app {
        width: 100%;
        height: 100%;
    }

    .el-container {
        height: 100%;
    }

    .toolItem {
        float: left;
        display: block;
        cursor: pointer;
    }

    .toolItem span {
        font-size: 14px;
    }

    .dot {
        width: 10px;
        height: 10px;
        background-color: #42b983;
        border-radius: 50%;
        display: inline-block;
        margin-right: 5px;
    }

    .el-aside {
        --el-aside-width: none;
        height: 100%;
        box-shadow: 8px 8px 40px 0 rgba(35, 40, 67, .16);
    }

    .router-link-exact-active,
    .active {
        color: #2c3e50;
        font-weight: bold;
    }

    a {
        text-decoration: none;
    }

</style>
